<template>
  <div class="w100">
    <div class="box">
      <h2 class="title">swiper数据联动数据</h2>
      <div class="tab">
        <div id="tabCon" class="swiper-container">
          <div class="swiper-wrapper" ref="swiperWrapper">
            <div
              class="swiper-slide"
              v-for="(item, index) in lists"
              :class="{ active: currentId == item.id }"
              :key="index"
            >
              <span>{{ item.name }}</span>
            </div>
          </div>
        </div>
      </div>

      <div id="tabContain" class="tabContain swiper-container">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(item, index) in this.lists"
            :key="index"
          >
            <div class="vs">
              {{ item.dec }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import "swiper/dist/css/swiper.min.css";
import Swiper from "swiper";
export default {
  data() {
    return {
      currentId: 0,
      lists: [
        { id: 0, name: "赚钱能力", dec: "赚钱能力赚钱能力赚钱能力" },
        {
          id: 1,
          name: "抗风险能力",
          dec: "抗风险能力抗风险能力抗风险能力抗风险能力抗风险能力",
        },
        {
          id: 2,
          name: "选股能力",
          dec: "选股能力选股能力选股能力选股能力选股能力",
        },
        {
          id: 3,
          name: "攻守兼备能力",
          dec: "攻守兼备能力攻守兼备能力攻守兼备能力攻守兼备能力攻守兼备能力",
        },
        {
          id: 4,
          name: "择时能力",
          dec: "择时能力择时能力择时能力择时能力择时能力",
        },
        {
          id: 5,
          name: "管理人经验",
          dec: "管理人经验管理人经验管理人经验管理人经验管理人经验",
        },
      ],
      mySwiper: null, //swiper实例
      swiperWidth: 0, //swiper可视宽度
      maxTranslate: "", //最大的滑动距离
      maxWidth: "",
      // tab元素
      slide: {
        offsetLeft: 0,
        clientWidth: 0,
      },
      slideLeft: 0,
      slideWidth: 0,
      slideCenter: 0,
      nowTlanslate: 0,
      // swiper内容区
      pageSwiper: {},
    };
  },
  mounted() {
    var that = this;
    that.mySwiper = new Swiper("#tabCon", {
      freeMode: true,
      freeModeMomentumRatio: 0.5,
      slidesPerView: "auto",
      resistanceRatio: 0.7,
      on: {
        tap: function (swiper) {
          that.swiperWidth = that.$refs.swiperWrapper.clientWidth;
          that.maxTranslate = that.mySwiper.maxTranslate();
          that.maxWidth = -that.maxTranslate + that.swiperWidth / 2;
          console.log(this.clickedIndex);
          if (that.currentId == that.lists[this.clickedIndex].id) {
            return;
          }
          that.currentId = that.lists[this.clickedIndex].id;
          that.slide = this.slides[this.clickedIndex];
          that.slideLeft = that.slide.offsetLeft;
          that.slideWidth = that.slide.clientWidth;
          that.slideCenter = that.slideLeft + that.slideWidth / 2;
          that.mySwiper.setTransition(300);
          if (that.slideCenter < that.swiperWidth / 2) {
            that.mySwiper.setTranslate(0);
          } else if (that.slideCenter > that.maxWidth) {
            that.mySwiper.setTranslate(that.maxTranslate);
          } else {
            var nowTlanslate = that.slideCenter - that.swiperWidth / 2;
            that.mySwiper.setTranslate(-nowTlanslate);
          }

          that.pageSwiper.slideTo(this.clickedIndex, 200, false);
        },
      },
    });

    //swiper里边内容
    that.pageSwiper = new Swiper("#tabContain", {
      autoplay: false,
      direction: "horizontal", // 切换选项
      resistanceRatio: 0,
      paginationClickable: true,
      watchSlidesProgress: true,
      on: {
        slideChangeTransitionEnd: function () {},
        slideChange: function () {
          that.swiperWidth = that.$refs.swiperWrapper.clientWidth;
          that.maxTranslate = that.mySwiper.maxTranslate();
          that.maxWidth = -that.maxTranslate + that.swiperWidth / 2;
          that.currentId = this.activeIndex;
          that.slide = that.mySwiper.slides[that.currentId];
          that.slideLeft = that.slide.offsetLeft;
          that.slideWidth = that.slide.clientWidth;
          that.slideCenter = that.slideLeft + that.slideWidth / 2;
          that.mySwiper.setTransition(300);
          if (that.slideCenter < that.swiperWidth / 2) {
            that.mySwiper.setTranslate(0);
          } else if (that.slideCenter > that.maxWidth) {
            that.mySwiper.setTranslate(that.maxTranslate);
          } else {
            var nowTlanslate = that.slideCenter - that.swiperWidth / 2;
            that.mySwiper.setTranslate(-nowTlanslate);
          }
        },
      },
    });
  },
};
</script>

<style lang="less">
.title {
  text-align: center;
  margin-bottom: 0.5rem;
}
//  swiper
.tabContain {
  padding: 0.2rem;
  .vs {
    border: 1px solid #fdd;
    margin: 0 0.3rem;
    overflow: hidden;
    min-height: 2.9rem;
  }
}
.tab {
  overflow: hidden;
  position: relative;
  margin-left: 0.3rem;
  height: 0.7rem;
  &::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    background: #e6e6e6;
  }

  #tabCon {
    width: 100%;
    overflow: hidden;
    .swiper-slide {
      width: auto;
      flex-shrink: 0;
      font-size: 0.32rem;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      color: #333333;
      line-height: 0.48rem;
      padding: 0.1rem 0.15rem;
      &.active {
        font-size: 0.34rem;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: bold;
        color: #000000;
      }
      span {
        transition: all 0.3s ease;
        display: block;
      }
      &:first-child {
        padding-left: 0;
      }
    }
  }
}
.w100 {
  width: 100%;
}
</style>
